Flexbox와 GridLayout으로 카드 만들기

✒️ 2025-05-16 13:02 내용 수정

bootstrap에도 카드 컨텐츠가 있어 이후 프로젝트 등에선 bootstrap을 이용하는 것이 편하다.
여기선 flexbox와 grid layout 수업 내용 복습용으로 진행한 실습을 정리하였다.

내용물을 담은 card 형태의 div를 생성하고, grid layout으로 여러 장의 카드를 화면에 생성한다.
card 내의 컨텐츠 배치는 flexbox를 사용하여 배치한다.

grid layout에서 그리드 아이템의 행과 열 배치를 비율로 설정했기 때문에 뷰포트의 사이즈를 변경하면 그에 따라 card의 폭도 자동으로 조정된다.
- 이미지의 높이는 고정값으로 설정하여 뷰포트 사이즈에 무관하게 동일하다.

flexbox_grid_exam 2.png

flexbox_grid_exam 3.png

1. html 설정

전체적인 구조는 <main> 시맨틱 내에 본문을 담도록 구성한다.
타이틀은 컨텐츠 표시용으로 추가하였다.
<div id="grid">는 그리드 컨테이너이며, 그리드 컨테이너에는 <div class="card">인 그리드 아이템을 가진다.
각 그리드 아이템 내에는 제목, 사진, 내용, 더보기 버튼으로 구조를 나누었다.

<body>
    <main>
        <h1>Card Contents</h1>
        <div id="grid">
            <div class="card">
                <div class="title-box">
                    <p class="title">Title</p>
                </div>
                <div class="content-box">
                    <div class="photo">
	                    <!-- 각 카드별 이미지는 취향에 따라 추가 -->
                        <img src="./images/ocean-waves.jpg">
                    </div>
                    <p class="content">
                        This is the content for card.
                        Flexbox makes it easy to align and distribute space among items in a container.
                    </p>
                </div>
                <div class="btn-wrap">
                    <button class="rd-btn">Read More</button>
                </div>
            </div>
        </div>
    </main>
</body>

2. css

전체 설정
- 개발자 지정 속성을 사용하여 HTML 파일 전체에 공용으로 사용할 색상을 설정한다.
  - 중복되는 색상 코드 입력을 줄이고 편리하게 관리할 수 있다.
  - 기본 속성#1. color 참고.
- 전체 설정으로 box-sizing과 margin, padding을 설정한다.
  - margin, padding이 기본적으로 설정된 요소들이 있으면 나중에 설정을 진행할 때 번거로워 0으로 설정하였다.

:root{
	--card-blue: rgb(73, 181, 243);
	--card-gray: rgb(223, 223, 223);
}
*{box-sizing: border-box; margin:0; padding:0;}

<main> 설정
- 컨텐츠를 담을 <main> 태그는 flexbox 설정을 적용하여 화면에서 전체 컨텐츠가 가운데에 오도록 배치하였다.

main{
	margin-top: 30px;
	display: flex; 
	flex-direction: column;
	align-items: center;
}

grid layout 설정
- <div id="grid">를 그리드 컨테이너로 설정하고, 그리드 트랙(행과 열), 갭 등을 설정한다.
- 그리드 컨테이너는 2행 3열로 배치하였다.

#grid{
	width: 80%;
	margin-top: 20px;
	display: grid;
	padding: 30px;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	border: 1px solid #efefef;
	background-color: aliceblue;
	border-radius: 10px;
}

그리드 아이템 설정
- 그리드 아이템(card)을 카드 형태로 꾸민다.

.card{
	border: 1px solid var(--card-gray);
	border-radius: 10px;
	background-color: rgb(255, 255, 255);
	box-shadow: 2px 2px 5px gray;
}

그리드 아이템 내 컨텐츠

/* 카드 제목 */
.title-box{
	width: 100%;
	padding: 10px;
	background-color: var(--card-blue);
	border-radius: 10px 10px 0 0;
}
.title{
	font-size: 18px;
	color:white;
	font-weight: bold;
}

/* 카드 내용 */
.content-box{
	padding: 10px;
	border: 1px solid var(--card-gray);
	border-left: none;
	border-right: none;
}
.photo{
	margin-bottom: 10px; 
	width: 100%; height: 200px;
	border-radius: 10px;
	border: 2px solid var(--card-gray);
}
.photo img{
	width: 100%; height: 100%;
	object-fit: fill;
	border-radius: 10px;
}

/* 버튼 */
.btn-wrap{
	margin:10px;
	display: flex;
	justify-content: flex-end;
}
.rd-btn{
	padding: 5px 10px;
	background-color: var(--card-blue);
	border: 1px solid var(--card-gray);
	color:white;
	border-radius: 5px;
	box-shadow: 2px 2px 1px var(--card-gray);
}